<template>
<section class="album">
  <div class="album-inner">
    <el-row :gutter="15">
      <el-col :span="6" v-for="(item,index) in newList" :key="index">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <el-image :src="item.img_thumbnail|fillImgShot" style="height:240px;" fit="cover" @click="linkToDetail(item.id)"></el-image>
          <!-- <div class="card-content" @click="linkTo(item)">
            <p class="title">{{item.name}}</p>
            <p class="text-info hidden-md-and-down">{{item.imgCount}}张</p>
          </div> -->
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="text-center">
        <el-button icon="el-icon-right" type="primary" plain class="btn-more" @click="linkToList()" round>查看更多</el-button>
      </el-col>
    </el-row>
  </div>
</section>
</template>

<script>
export default {
  name: 'NewDesign', //新品推荐
  data() {
    return {
      newList: []
    }
  },
  mounted() {
    this.$axios.get("/api/web/getNew").then(res => {
      this.newList = res.data.rows;
    });
  },
  methods: {
    linkToList() {
      this.$router.push({
        name: 'list',
        path: '/list',
        query: {
          getNew: 'new',
          title: '最新图片'
        }
      })
    },
    linkToDetail(id) {
      this.$router.push(`/detail?id=${id}`);
    },
    linkTo(obj) {
      var type = parseInt(obj.tp_type);
      if (type === 1) {
        this.$router.push({
          name: "list",
          path: "/list",
          query: {
            topic_id: obj.id,
            title: obj.name
          }
        });
      } else {
        window.open(obj.link, "_self");
        return;
      }

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.album {
    margin-bottom: 24px;
    .album-inner {
        .btn-more {}
    }
    ::v-deep.el-card {
        position: relative;
        margin-bottom: 15px;
        .el-image {
            display: block;
            width: 100%;
        }
        .card-content {
            cursor: pointer;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: rgba(0,0,0,.75);
            color: @white;
            font-size: 20px;
            font-weight: 600;
            border-radius: 6px;
            padding: 12px 16px;
            transition: all 0.2s;
            transform-origin: center center;
            .title {
                border-bottom: 4px solid @white;
                padding-bottom: 6px;
                word-break: break-all;
            }
            .text-info {
                font-size: 14px;
                font-weight: lighter;
                padding-top: 5px;
            }
        }
        &:hover {
            .card-content {
                opacity: 0;
                transform: translate(-50%,-50%) scale(2);
            }
        }
    }
}
</style>
